<template>
  <div class="report_finance_lottery">
    <Row class="report_finance_lottery_edit">
      <Form class="from"
            style="width: 100%"
            label-position="left"
            inline>
        <Row type="flex"
             justify="space-between">
          <Row>
            <FormItem :label-width="72">
              <div slot="label"
                   style="transform: translateX(12px);">时间：</div>
              <!--  moms:assets:machineconfigview -->
              <datePickerYmd :dateOption="dateOption"
                             :dataType="dataType"
                             :selectDateType.sync="selectDateType"
                             v-model="timeDate"
                             @on-change="handleSearsh"
                             style="display:inline-block"></datePickerYmd>
            </FormItem>
            <FormItem :label-width="72">
              <div slot="label"
                   style="transform: translateX(12px);">门店名称：</div>
              <!--  moms:assets:machineconfigview -->
              <vueTreeselectChoice :multiple="true"
                                   style="font-size: 12px"
                                   :z-index="2001"
                                   value-consists-of="LEAF_PRIORITY"
                                   ref="vueTreeselectChoice"
                                   @on-api-finish="apiFinish"
                                   @input="handleShop"
                                   v-model="ShopValue"
                                   permissionCode="moms:report:ticketanalytics"></vueTreeselectChoice>
            </FormItem>
            <FormItem>
              <Button class="search-btn"
                      style="width: 80px"
                      @click="handleSearsh"
                      type="primary">查询</Button>
            </FormItem>
          </Row>
          <Row>
            <FormItem>
              <Button style="width: 80px"
                      @click="handleExport"
                      v-if="hasPermission('moms:report:ticketanalyticsexport')"
                      class="search-btn">导出</Button>
            </FormItem>
          </Row>
        </Row>
      </Form>
    </Row>
    <el-table style="font-size: 12px"
              border
              stripe
              v-loading="loading"
              :max-height="520"
              :header-cell-class-name="tableHeaderRowClassName"
              :data="listData">
      <el-table-column :label="item.title"
                       v-for="(item, index) in columns"
                       :prop="item.key"
                       :align="item.align"
                       :key="index">
      </el-table-column>
    </el-table>
    <div class="page-box">
      <Page :total="total"
            ref="pages"
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"
            :page-size-opts="$pageSizeOpts"
            show-sizer
            show-total />
    </div>
    <down-center ref="downCenterRef"
                 perms="moms:report:ticketanalytics"
                 v-if="hasPermission('moms:report:ticketanalyticsexport')"></down-center>
  </div>
</template>
<script>
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import { Table, TableColumn } from 'element-ui'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import dayjs from 'dayjs'
import { assetLottery } from '@/api/report/finance'
import errorCaptured from '@/libs/errorCaptured'
import DownCenter from '@/view/components/down-center/index.vue'
export default {
  name: 'report_finance_lottery',
  components: { vueTreeselectChoice, ElTable: Table, ElTableColumn: TableColumn, datePickerYmd, DownCenter },
  data () {
    return {
      ShopValue: [],
      shopIds: [],
      formData: {
        shopIds: [],
        startDate: '',
        endDate: '',
        reportType: 1,
        offset: 0,
        limit: 10
      },
      total: 0,
      loading: false,
      listData: [],
      dataType: [
        { key: 'year', value: '年' },
        { key: 'month', value: '月' }
      ],
      radioOption: [
        { key: 'assetPoint', value: '积分统计表' },
        { key: 'assetShopPoint', value: '门店积分统计表' }
      ],
      selectDateType: 'month',
      timeDate: [
        dayjs()
          .format('YYYY-MM-01 00:00:00'),
        dayjs()
          .format('YYYY-MM-DD 00:00:00')
      ],
      dateOption: {
        disabledDate: date => {
          if (process.env.NODE_BUILD !== 'prod') return dayjs(date).isAfter(dayjs())
          return dayjs(date).isAfter(dayjs().subtract(1, 'day'))
        }
      },
      columns: [
        { title: '门店', key: 'shopName', align: 'center' },
        { title: '日期', key: 'statDate', align: 'center' },
        { title: '机台出票', key: 'machineAmount', align: 'center' },
        { title: '活动赠票', key: 'activeAmount', align: 'center' },
        { title: '新增票合计', key: 'increaseAmount', align: 'center' },
        { title: '兑换票', key: 'exchangeAmount', align: 'center' },
        { title: '到期票', key: 'expireAmount', align: 'center' },
        { title: '扣减票合计', key: 'reduceAmount', align: 'center' },
        { title: '结存票', key: 'balanceAmount', align: 'center' }
      ]
    }
  },
  computed: {
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      if (this.selectDateType === 'daterange') {
        return dayjs(this.timeDate[1])
          .add(1, 'day')
          .format('YYYY-MM-DD 00:00:00')
      }
      return this.timeDate[1]
    }
  },
  created () {
    // this.getList()
  },
  methods: {
    async handleShop () {
      const ids = await this.$refs.vueTreeselectChoice.getShopId()
      this.formData.shopIds = ids
      this.handleSearsh()
    },
    apiFinish () {
      // this.ShopValue = null
      this.treeselectoptions = this.$refs.vueTreeselectChoice.treeselectoptions
    },
    handlePage (val) {
      this.formData.offset = (val - 1) * this.formData.limit
      this.getList()
    },
    handlePageSize (val) {
      this.formData.limit = val
      this.formData.offset = 0
      if (this.formData.pageIndex === 1) {
        this.getList()
      } else {
        this.formData.pageIndex = 1
      }
      // this.getShopList()
    },
    handleSearsh () {
      this.formData.offset = 0
      this.formData.pageIndex = 1
      this.getList()
    },
    tableHeaderRowClassName () {
      return 'gray-header'
    },
    // 导出
    handleExport () {
      if (!this.formData.shopIds.length) return this.$Message.error(`请选择门店`)
      this.$refs.downCenterRef.addTask({
        merchantId: this.$store.state.user.merchantId,
        shopIds: this.formData.shopIds,
        startDate: this.startDate,
        endDate: this.endDate,
        dateType: { year: 2, month: 1 }[this.selectDateType],
        taskModule: 'statLottery',
        operator: this.$store.state.user.userName
      })
    },
    async getList () {
      let { limit, offset, shopIds } = this.formData
      if (!shopIds.length) return this.$Message.error(`请选择门店`)
      this.loading = true
      const [err, res] = await errorCaptured(assetLottery, {
        startDate: this.startDate,
        endDate: this.endDate,
        limit,
        offset,
        reportType: { year: 2, month: 1 }[this.selectDateType],
        shopIds,
        merchantId: this.$store.state.user.merchantId
      })
      this.loading = false
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.listData = res.data.data || []
      this.total = res.data.totalCount || 0
    }
  }
}
</script>

<style lang="less" scoped>
.report_finance_lottery_edit {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: -4px;
}
.button_active {
  border: 1px solid #2d8cf0;
}
.ivu-radio-group-button .ivu-radio-wrapper-checked {
  background: #2d8cf0;
  color: #fff;
}
</style>
<style lang="less">
.report_finance_lottery {
  .gray-header {
    background-color: #f8f8f9;
    height: 40px;
    padding: 6px 0;
    font-weight: bold;
    color: #515a6e;
  }
}
</style>
